<template>
  <div class="app-container">
    <div class="content">
      <div class="title">{{ form.title }}</div>
      <div class="desc">
        <div class="bianqianContent" v-for="(item, index) in form.tags">
          <div class="biaoqian">{{ item }}</div>
        </div>
        <div class="zuozhe">作者：{{ form.createBy }}</div>
        <div style="margin-left:20px;">发布于：{{ form.createTime }}</div>
        <div style="margin-left:20px;">专区：{{ form.zoneName }}</div>
      </div>
      <div v-if="form.path" ref="onlyOffice" class="qualityManual-container-office" style="position: relative;"
        :style="{ height: onlyOfficeHeight + 'px' }">
        <!-- <vab-only-office :option='onlyOfficeOption' /> -->
        <div class="login-wrap" style="position: relative;">
          <vue-office-docx v-if="docxPath && docxPath.length > 0" :src="docxPath" @rendered="rendered"
            :style="{ height: onlyOfficeHeight + 'px' }" />
          <vue-office-excel v-if="excelPath && excelPath.length > 0" :src="excelPath" @rendered="rendered"
            :style="{ height: onlyOfficeHeight + 'px' }" />
          <vue-office-pdf v-if="pdfPath && pdfPath.length > 0" :src="pdfPath" @rendered="rendered"
            :style="{ height: onlyOfficeHeight + 'px' }" />
        </div>
      </div>
      <div v-else class="ql-container" style="margin-top: 20px;">
        <div class="ql-editor" style="padding: 0;" v-html="form.context">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

// import vabOnlyOffice from '@/views/tool/onlyoffice'
import { article_page, article_delete, article_insert, article_update, article_publish, article_detail } from "@/api/article"

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: 'Index',
  components: {
    // vabOnlyOffice
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel,
  },
  data() {
    return {
      form: {
        id: null,
      },
      docxPath: '', //设置文档网络地址，可以是相对地址
      excelPath: '',
      pdfPath: '',
      //参考vabOnlyOffice组件参数配置
      onlyOfficeOption: {
        url: '',
        isEdit: '',
        fileType: '',
        title: '',
        lang: '',
        isPrint: '',
        user: { id: null, name: '' }
      },

      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      onlyOfficeHeight: 0,
    }
  },
  mounted() {
    let id = this.$route.query.id;
    console.log(id);
    if (id > 0) {
      this.form.id = id;
      this.getDetail();
    }
  },
  methods: {
    rendered() {
      console.log("渲染完成")
    },
    //获取文章详情
    getDetail() {
      article_detail(this.form).then(res => {
        this.form = res.data;

        if (this.form.path) {
          var suffix = this.form.path.substring(this.form.path.lastIndexOf(".") + 1);//txt
          console.log(suffix);
          if (suffix == 'pdf') {
            this.pdfPath = this.form.path;
          } else if (suffix == 'docx' || suffix == 'doc') {
            this.docxPath = this.form.path;
          } else if (suffix == 'xls' || suffix == 'xlsx') {
            this.excelPath = this.form.path;
          }
          // var fileName = this.getFileName(this.form.path);

          // this.onlyOfficeOption.isEdit = false
          // this.onlyOfficeOption.lang = 'zh-CN'
          // this.onlyOfficeOption.url = this.form.path
          // this.onlyOfficeOption.title = fileName
          // this.onlyOfficeOption.fileType = suffix
          // this.onlyOfficeOption.isPrint = false
          // this.onlyOfficeOption.user = { id: 12, name: '-' }

          this.$nextTick(function () {
            let marginTop = this.$refs.onlyOffice.getBoundingClientRect().y;
            this.onlyOfficeHeight = this.windowHeight - marginTop - 35;
            console.log(this.onlyOfficeHeight);
          });
        }
      })
    },
    getFileName(o) {
      var pos = o.lastIndexOf("\\");
      return o.substring(pos + 1);
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  flex: 1;
  padding: 15px;

  .contentTop {
    display: flex;
    justify-content: center;
  }

  .title {
    font-weight: bold;
    font-size: 28px;
  }

  .context {
    color: #555666;
    margin-top: 8px;
    line-height: 30px;
  }

  .desc {
    margin-top: 8px;
    display: flex;
    align-items: center;

    .bianqianContent {
      display: flex;
      align-items: center;
    }

    .biaoqian {
      color: #fc5531;
      background-color: #fff5f2;
      padding: 3px 8px;
      margin-right: 5px;
    }

    .zuozhe {
      margin-left: 15px;
    }
  }

  .caozuo {
    display: flex;
    justify-content: space-between;
  }
}

.qualityManual-container-office {
  margin-top: 20px;
  width: 100%;
}

::v-deep .logo {
  display: none !important;
}</style>
